<template>
  <PageContainer>
    <view class="container">
      <Header title="查看详情" :data="title">
        <view class="topic">
          {{ title }}
        </view>
      </Header>
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        @register="register"
        :scroll-top-bottom="260"
        :parame="parame"
      >
        <view class="detail-list">
          <template v-for="(item, index) in dataList" :key="index">
            <DetailCrad
              :name="item.userName"
              :avatar-image="item.avatar"
              @click="
                navigateTo({
                  name: 'collectRecordDetails',
                  options: {
                    id: item.id,
                  },
                })
              "
            >
              <DtailImg v-if="item.itemType === 'UploadImg'" :imgs="item.contentList"></DtailImg>
              <VideoPlay
                v-else-if="item.itemType === 'UploadVideo'"
                :model-value="{
                  videoUrl: item.contentList[0],
                }"
              ></VideoPlay>
              <template v-else-if="item.itemType === 'UploadFile'">
                <FileDownload
                  v-for="(fileObj, index) in item.contentList"
                  :key="index"
                  :file-name="JSON.parse(fileObj).name"
                  :file-url="JSON.parse(fileObj).url"
                ></FileDownload>
              </template>
              <template v-else>
                <template v-if="item.itemType == 'ChooseLocation'">
                  <DetailText>
                    {{ parseAddress(item.content)?.address }}
                  </DetailText>
                </template>
                <template v-else>
                  <DetailText v-for="(content, index) in item.contentList" :key="index">
                    {{ content }}
                  </DetailText>
                </template>
              </template>
            </DetailCrad>
          </template>
        </view>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* statisticsDetail 查看详情 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import DetailCrad from './components/DetailCrad/index.vue';
  import DetailText from './components/DetailText/index.vue';
  import DtailImg from './components/DtailImg/index.vue';
  import VideoPlay from '@/components/VideoPlay/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import FileDownload from './components/FileDownload/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { provide, reactive, ref } from 'vue';
  import type { StatisticsDetailList } from '@/api/serviceForm/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { statisticsDetailList } from '@/api/serviceForm';
  import type { IQuery } from '@/api/indexTypes';
  import { useLocation } from '@/hooks/core/useLocation';
  const title = ref('');

  const parame = reactive<IQuery & { serviceTicketFormId: number; itemId: number }>({
    current: 1,
    size: 10,
    serviceTicketFormId: 0,
    itemId: 0,
  });
  const { parseAddress } = useLocation();

  console.log();

  const dataList = ref<StatisticsDetailList[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', statisticsDetailList);

  onLoad<'statisticsDetail'>((op) => {
    title.value = op.title;
    parame.itemId = op.id;
    parame.serviceTicketFormId = op.serviceTicketFormId;
    refresh();
  });
</script>

<style lang="scss" scoped>
  .container {
    .topic {
      padding: 36rpx;
      font-size: 36rpx;
      line-height: 48rpx;
    }
    .detail-list {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      padding: 36rpx;
    }
  }
</style>
